<!-- 学术库问答训练 -->
<template>
  <div>
    <div>
      <el-container>
        <el-aside width="200px">
        </el-aside>
        <el-main>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>学术库问答训练</span>
              <el-button style="margin-left: 30px;" type="primary" @click="addNewQuestion">添加新问答</el-button>
            </div>
            <el-table :data="questions" style="width: 100%" >
              <el-table-column prop="question" label="问题" width="200"></el-table-column>
              <el-table-column prop="answer" label="答案" width="500"></el-table-column>
              <el-table-column prop="category" label="类别" width="120"></el-table-column>
              <el-table-column prop="difficulty" label="难度" width="100"></el-table-column>
              <el-table-column prop="relatedTechnology" label="关联技术" width="150"></el-table-column>
              <el-table-column prop="remark" label="备注" width="130"></el-table-column>
              <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                  <el-button type="text" @click="editQuestion(scope.row)">编辑</el-button>
                  <el-button type="text" @click="deleteQuestion(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-main>
      </el-container>
      <!-- 问答详情和编辑模态框 -->
      <el-dialog :visible.sync="dialogVisible" :title="dialogTitle">
        <el-form :model="currentQuestion" ref="questionForm" label-width="120px">
          <el-form-item label="问题内容">
            <el-input v-model="currentQuestion.question"></el-input>
          </el-form-item>
          <el-form-item label="类别">
            <el-input v-model="currentQuestion.category"></el-input>
          </el-form-item>
          <el-form-item label="难度">
            <el-input v-model="currentQuestion.difficulty"></el-input>
          </el-form-item>
          <el-form-item label="关联技术">
            <el-input v-model="currentQuestion.difficulty"></el-input>
          </el-form-item>
          <el-form-item label="答案内容">
            <el-input v-model="currentQuestion.answer.answer"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="currentQuestion.answer.remark"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitQuestion">提交</el-button>
            <el-button @click="dialogVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      questions: [], // 问答列表  
      currentQuestion: { // 当前编辑的问答 
        id: null,
        question: '',
        answer: '',
        category: '',
        difficulty: '',
        relatedTechnology: '',
        remark: '',
      },
      dialogVisible: false, // 模态框显示状态  
      dialogTitle: '添加新问答', // 模态框标题  
    };
  },


  created() {
    this.getquestions() 
  },
  methods: {
    getquestions() {
      let res = {
        data: [
          {
            id:1,
            question: '什么是数字虚拟人?',
            answer: '数字虚拟人是一种基于计算机图形学、人工智能等技术创建的虚拟角色，能够模拟人类的行为和交互。',
            category: '定义',
            difficulty: '简单',
            relatedTechnology: '计算机图形学、人工智能',
            remark: ''
          },
          {
            id:2,
            question: '数字虚拟人有哪些应用场景?',
            answer: '数字虚拟人可应用于游戏、影视、直播、虚拟客服、教育培训等领域，提供丰富的交互体验。',
            category: '应用场景',
            difficulty: '简单',
            relatedTechnology: '游戏开发、影视制作',
            remark: ''
          },
          {
            id:3,
            question: '如何创建数字虚拟人?',
            answer: '创建数字虚拟人涉及3D建模、动画设计、语音合成等多个环节，需要专业的技术和工具支持。',
            category: '创建流程',
            difficulty: '中等',
            relatedTechnology: '3D建模、动画设计',
            remark: ''
          },
          {
            id:4,
            question: '数字虚拟人的表情如何制作?',
            answer: '数字虚拟人的表情制作通常通过面部捕捉技术实现，将真实人的表情映射到虚拟人模型上，使其表情更加自然生动。',
            category: '表情制作',
            difficulty: '中等',
            relatedTechnology: '面部捕捉技术',
            remark: ''
          },
          {
            id:5,
            question: '数字虚拟人的语音是如何合成的?',
            answer: '数字虚拟人的语音合成利用文本转语音技术，将文本信息转化为自然的语音输出，使其能够与人类进行语音交互。',
            category: '语音合成',
            difficulty: '中等',
            relatedTechnology: '文本转语音技术',
            remark: ''
          },
          {
            id:6,
            question: '数字虚拟人能否进行实时交互?',
            answer: '是的，数字虚拟人可以通过自然语言处理、语音识别等技术实现实时交互，能够与用户进行对话和互动。',
            category: '实时交互',
            difficulty: '困难',
            relatedTechnology: '自然语言处理、语音识别',
            remark: ''
          },
          {
            id:7,
            question: '数字虚拟人的发展前景如何?',
            answer: '随着技术的不断进步和应用场景的扩大，数字虚拟人的发展前景非常广阔，将在更多领域发挥重要作用。',
            category: '发展前景',
            difficulty: '困难',
            relatedTechnology: '虚拟现实、增强现实',
            remark: ''
          },
          {
            id:8,
            question: '如何评价数字虚拟人的逼真程度?',
            answer: '评价数字虚拟人的逼真程度可以从外观、动作、语音等多个方面进行综合评估，需要考虑模型的精细度、动作的流畅性以及语音的自然度等因素。',
            category: '逼真程度评价',
            difficulty: '困难',
            relatedTechnology: '视觉识别、语音评估',
            remark: ''
          },
          {
            id:9,
            question: '数字虚拟人能否替代真实演员?',
            answer: '数字虚拟人可以在一定程度上模拟真实演员的表演，但目前还无法完全替代真实演员，因为真实演员的表演具有独特的情感和个性魅力。',
            category: '替代真实演员',
            difficulty: '困难',
            relatedTechnology: '表演艺术、情感表达',
            remark: ''
          },
          {
            id:10,
            question: '数字虚拟人在哪些领域具有创新应用?',
            answer: '数字虚拟人在游戏、影视、虚拟偶像、在线教育等领域具有创新应用，能够为用户提供沉浸式的体验和全新的交互方式。',
            category: '创新应用',
            difficulty: '困难',
            relatedTechnology: '虚拟现实技术、人工智能算法',
            remark: ''
          }
        ]
      }
      this.questions = res.data
      // //正式环境 调用接口
      // const apiUrl = '/api/get/questions';
      // this.axios.post(apiUrl, id)
      //       .then(response => {
      //         // 添加成功，更新问答列表
      //         this.fetchQuestions();
      //         this.message({ message: '获取数据成功', type: 'success' });
      //       }).catch(error => {
      //         console.error('获取数据失败', error); this.message.error('获取数据失败!');
      //       });  
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$message({
            type: 'success',
            message: '提交成功!'
          })
          //进行表单数据的提交处理，
          this.submitToServer(this.form);
        } else {
          this.$message({
            type: 'info',
            message: res.msg
          })
          return false;
        }
      });
    },

    fetchQuestions() {
      // 调用API获取问答列表数据并更新组件状态  
    },
    addNewQuestion() {
      this.dialogTitle = '添加新问答';
      this.currentQuestion = {
        
      };
      this.dialogVisible = true;
    },
    editQuestion(question) {
      this.dialogTitle = '编辑问答';
      this.currentQuestion = { ...question };
      this.dialogVisible = true;
    },
    //删除问答
    deleteQuestion(id) {
      this.$confirm(`确定要删除吗?`, '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const apiUrl = '/api/delete/questions';
          this.axios.post(apiUrl, id)
            .then(response => {
              // 添加成功，更新问答列表
              this.fetchQuestions();
              this.message({ message: '删除成功', type: 'success' });
            }).catch(error => {
              console.error('删除问答失败', error); this.message.error('删除失败');
            });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    submitQuestion() {
      this.refs.questionForm.validate((valid) => {
        if (valid) {
          // 调用API保存或更新问答 
          if (this.currentQuestion.id) {
            // 更新问答 
            this.updateQuestion();
          } else {
            // 添加新问答 
            this.addQuestion();
          } this.dialogVisible = false;
        } else {
          console.log('表单验证失败'); return false;
        }
      });


    },
    addQuestion() {
      const apiUrl = '/api/questions';
      this.axios.post(apiUrl, this.currentQuestion)
        .then(response => {
          // 添加成功，更新问答列表
          this.fetchQuestions();
          this.message({ message: '添加成功', type: 'success' });
        }).catch(error => {
          console.error('添加问答失败', error); this.message.error('添加失败');
        });
    },
    updateQuestion() {
      const apiUrl = `/api/questions/${this.currentQuestion.id}`;
      this.axios.put(apiUrl, this.currentQuestion)
        .then(response => {
          // 更新成功，更新问答列表 
          this.fetchQuestions(); this.message({
            message: '更新成功',
            type: 'success'
          });
        })
        .catch(error => {
          console.error('更新问答失败', error);
          this.$message.error('更新失败');
        });
    }

  }


}
</script>

<style scoped>
.knowledge-base-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

.el-date-editor,
.el-input,
.el-input__inner {
  width: 500px !important;
}

.el-select,
.el-textarea {
  width: 500px !important;
}

.form-container {
  width: 100%;
}

.el-form-item__label {
  font-weight: bold;
}

.el-input__inner,
.el-textarea__inner {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 5px 10px;
  box-shadow: none;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.el-input__inner:focus,
.el-textarea__inner:focus {
  outline: none;
  border-color: #409eff;
}

.el-button {
  margin-right: 10px;
}

.el-button--primary {
  background-color: #20a0ff;
  border-color: #20a0ff;
}

.el-button--primary:hover {
  background-color: #409eff;
  border-color: #409eff;
}
</style>

 
 